<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue.js"></script>
		<style>
			/* v-enter 这是一个时间点,是进入之前,元素的起始状态,此时还没有开始进入 */
			/* v-leave-to 这是一个时间点,是动画离开之后,离开的终止终止状态,此时,元素动画已经结束了 */
			.v-enter,.v-leave-to{
				opacity: 0;
				transform: translateX(200px);
			}
			/* v-enter-active入场动画的时间段 */
			/* v-leave-active 离场动画的时间段 */
			.v-enter-active,.v-leave-active{
				transition: all 1s ease;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="button" value="动画" @click="flag=!flag" />
			<!-- 使用transition元素，把徐奥被动画控制的元素，包裹起来 ,其过度作用，是vue提供的-->
			<transition>
				<h3 v-if="flag">这是一个动画</h3>
			</transition>
		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					flag: false
				},
				methods: {}
			})
		</script>
	</body>
</html>
